import { Button, Collapse, CollapseProps } from "antd"
import { type ComponentEvent, useComponentConfigStore } from "../../stores/component-config"
import { getComponentById, useComponentStore } from "../../stores/components"
import { useState } from "react"
import ActionModal, { ActionConfig } from "./ActionModal"
import { DeleteOutlined, EditOutlined } from "@ant-design/icons"


const ComponentEvent: React.FC = () => {

  const { componentConfig } = useComponentConfigStore()
  const { curComponent, updateComponentProps, components } = useComponentStore()
  const [actionModalOpen, setActionModalOpen] = useState<boolean>(false)
  const [curEvent, setCurEvent] = useState<ComponentEvent>()
  const [curAction, setCurAction] = useState<ActionConfig>()
  const [curActionIndex, setCurActionIndex] = useState<number>()

  if(!curComponent) return null

  const deleteAction = (event: ComponentEvent, index: number) => {
    if(!curComponent) return

    const actions = curComponent.props[event.name]?.actions

    actions.splice(index, 1)

    updateComponentProps(curComponent.id, {
      [event.name]: {
        actions
      }
    })
  }

  const editAction = (config: ActionConfig, index: number) => {
    if(!curComponent) return

    setCurAction(config)
    setCurActionIndex(index)
    setActionModalOpen(true)
  }

  const items: CollapseProps['items'] = (componentConfig[curComponent.name].events || []).map(event => {
    return {
      key: event.name,
      label: <div className="flex justify-between leading-[30px]">
        {event.label}
        <Button
        type="primary"
        onClick={(e) => {
          e.stopPropagation()

          setCurEvent(event)
          setActionModalOpen(true)
        }}
        >添加动作</Button>
      </div>,
      children: <div>
        {
          (curComponent.props[event.name]?.actions || []).map((item: ActionConfig, index: number) => {
            return <div key={index}>
              {
                item.type === 'goToLink' ? <div className="border border-[#aaa] m-[10px] p-[10px] relative">
                  <div className="text-[blue]">跳转链接</div>
                  <div>{item.url}</div>
                  <div className="absolute top-[10px] right-[35px] cursor-pointer"
                  onClick={() => editAction(item, index)}
                  >
                    <EditOutlined />
                  </div>
                  <div className="absolute top-[10px] right-[10px] cursor-pointer"
                  onClick={() => deleteAction(event, index)}
                  >
                    <DeleteOutlined />
                  </div>
                </div> : null
              }
              {
                item.type === 'showMessage' ? <div className="border border-[#aaa] m-[10px] p-[10px] relative">
                  <div className="text-[blue]">消息弹窗</div>
                  <div>{item.config.type}</div>
                  <div>{item.config.text}</div>
                  <div className="absolute top-[10px] right-[35px] cursor-pointer"
                  onClick={() => editAction(item, index)}
                  >
                    <EditOutlined />
                  </div>
                  <div className="absolute top-[10px] right-[10px] cursor-pointer"
                  onClick={() => deleteAction(event, index)}
                  >
                    <DeleteOutlined />
                  </div>
                </div> : null
              }
              {
                item.type === 'customJS' ? <div className="border border-[#aaa] m-[10px] p-[10px] relative">
                  <div className="text-[blue]">自定义JS</div>
                  <div className="absolute top-[10px] right-[35px] cursor-pointer"
                  onClick={() => editAction(item, index)}
                  >
                    <EditOutlined />
                  </div>
                  <div className="absolute top-[10px] right-[10px] cursor-pointer"
                  onClick={() => deleteAction(event, index)}
                  >
                    <DeleteOutlined />
                  </div>
                </div> : null
              }
              {
                item.type === 'componentMethod' ? <div key="componentMethod" className="border border-[#aaa] m-[10px] p-[10px] relative">
                  <div className="text-[blue]">组件方法</div>
                  <div>{getComponentById(item.config.componentId, components)?.desc}</div>
                  <div>{item.config.componentId}</div>
                  <div>{item.config.method}</div>
                  <div className="absolute top-[10px] right-[30px] cursor-pointer"
                    onClick={() => editAction(item, index)}
                  >
                    <EditOutlined />
                  </div>
                  <div className="absolute top-[10px] right-[10px] cursor-pointer"
                    onClick={() => deleteAction(event, index)}
                  >
                    <DeleteOutlined />
                  </div>
                </div> : null
              }
            </div>
          })
        }
      </div>
    }
  })

  const handleModalOk = (config?: ActionConfig) => {
    if(!config || !curEvent || !curComponent) return

    if(curAction) {
      updateComponentProps(curComponent.id, {
        [curEvent.name]: {
          actions: curComponent.props[curEvent.name]?.actions.map((item: ActionConfig, index: number) => {
            return index === curActionIndex ? config : item
          })
        }
      })
    } else {
      updateComponentProps(curComponent.id, {
        [curEvent.name]: {
          actions: [
            ...(curComponent.props[curEvent.name]?.actions || []),
            config
          ]
        }
      })
    }

    setCurAction(undefined)

    setActionModalOpen(false)
  }

  return <div className="px-[10px]">
    <Collapse className="mb-[10px]" items={items} defaultActiveKey={componentConfig[curComponent.name].events?.map(item =>item.name)} />
    <ActionModal visible={actionModalOpen}
    action={curAction}
    handleOk={handleModalOk} handleCancel={() => {
      setActionModalOpen(false)
    }} />
  </div>
}

export default ComponentEvent